<template>
  <el-container direction="vertical" class="vH">
    <el-row type="flex" align="middle">
      <el-button
        icon="el-icon-plus"
        @click="showsysAssetA1edit({ ASSET_A1_30: '' })"
        :loading="page.loading"
      >
        新增
      </el-button>
      <el-divider direction="vertical"></el-divider>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        style="width:200px;margin-right:10px"
        clearable
        v-debounce
        v-model="page.searchtxt"
        @input="onSearchinput"
      ></el-input>
      <el-button
        icon="el-icon-search"
        @click="showAssetA1Search"
        :loading="page.loading"
      >
        高级搜索
      </el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button
        :loading="page.Copyloading"
        icon="el-icon-document-copy"
        @click="OnAssetCopy"
      >
        拆分
      </el-button>
      <el-button
        @click="showbatchUpdate"
        icon="el-icon-edit-outline"
        :loading="page.loading"
      >
        批量修改
      </el-button>
      <el-button
        @click="OnDelete(page.selection)"
        icon="el-icon-delete"
        :loading="page.loading"
      >
        批量删除
      </el-button>
      <el-button
        @click="OnUpdateExcel"
        icon="el-icon-document"
        :loading="page.loading"
      >
        Excel导入
      </el-button>
    </el-row>
    <el-main class="el-main_padding1">
      <el-table
        ref="table"
        v-loading="page.loading"
        border
        :data="tableData"
        stripe
        row-key="AUTOID"
        height="100%"
        @selection-change="onSelectionChange"
        @sort-change="OnSortChane"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <template v-for="item in assetA1Cols">
          <el-table-column
            :key="item.AUTOID"
            :prop="item.DataField"
            :width="item.Width"
            :label="item.HeaderText"
            sortable="custom"
          ></el-table-column>
        </template>
        <el-table-column label="操作" width="280px" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="small"
              icon="el-icon-edit"
              @click="showsysAssetA1edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              icon="el-icon-view"
              @click="showAssetCard(scope.row)"
              >查看</el-button
            >
            <el-button
              size="small"
              icon="el-icon-delete"
              @click="OnDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="main-footer">
      <mei-pagination
        :pageTotal="this.data.assetA1data.length"
        v-model="page.paginations"
      >
      </mei-pagination>
    </el-footer>
    <mei-dialog ref="editDialog" width="40%" :nopadding="true" title="资产编辑">
      <assetA1Edit ref="assetA1Edit" :formdata="page.selectData"></assetA1Edit>
    </mei-dialog>
    <mei-dialog
      ref="searchDialog"
      width="60%"
      :nopadding="true"
      title="资产高级查询"
      keep
    >
      <assetA1Search ref="assetA1Search"></assetA1Search>
    </mei-dialog>
    <mei-dialog ref="cardDialog" width="40%" :nopadding="true" title="资产卡片">
      <assetCard ref="assetCard" :cardData="page.selectData"></assetCard>
    </mei-dialog>
    <mei-dialog
      ref="updateDialog"
      width="60%"
      :nopadding="true"
      title="批量修改"
    >
      <batchUpdate ref="batchUpdate" :updateData="page.selection"></batchUpdate>
    </mei-dialog>

    <mei-dialog
      ref="excelDialog"
      width="90%"
      :nopadding="true"
      title="资产导入"
      top="2vh"
    >
      <updateExcel ref="updateExcel"></updateExcel>
    </mei-dialog>
  </el-container>
</template>

<script>
import { AssetA1 } from "@/api";
import { isArray } from "@/utils/validate";
import assetA1Edit from "./assetA1Edit.vue";
import assetA1Search from "./assetA1Search";
import assetCard from "./assetCard";
import batchUpdate from "./batchUpdate";
import updateExcel from "./updateExcel";
export default {
  data() {
    return {
      //页面控制
      page: {
        loading: false,
        Copyloading: false,
        paginations: {},
        searchtxt: "",
        selectData: {},
        selection: [], //选择的数据
        sort: {
          strorder: "", //字段
          ordertype: "" //方向 不为空 就是 desc
        }
      },
      //数据
      data: {
        sysAssetA1Data: [], //列数据
        assetA1data: [] //表数据
      }
    };
  },
  provide() {
    return {
      A1List: this
    };
  },
  inject: ["AssetA1"],
  //外部属性
  props: {
    asset60s: {
      type: String,
      default: ""
    }
  },
  //内部方法
  methods: {
    async initPage() {
      //加载
      this.page.loading = true;
      //列数据
      this.data.sysAssetA1Data = await AssetA1.GetSysAssetA2();
      this.getAssetA1Data();
      this.$nextTick(() => {
        this.page.loading = false;
      });
    },
    //得到资产数据
    async getAssetA1Data() {
      //加载
      this.page.loading = true;
      let search = {
        str60s: this.asset60s, //分类ID
        pagequery: this.page.searchtxt, //页面搜索
        assetquery: this.AssetA1.data.assetquery
      };
      this.data.assetA1data = await AssetA1.get(search, this.page.sort);
      this.$nextTick(() => {
        this.page.loading = false;
      });
    },
    onSearchinput() {
      this.getAssetA1Data();
    },
    //打开修改
    showsysAssetA1edit(item = {}) {
      //this.getAssetA1Edit().show({ form: { ...item } });
      this.page.selectData = item;
      this.$refs.editDialog.show();
    },
    //打开批量修改
    showbatchUpdate() {
      //this.getAssetA1Edit().show({ form: { ...item } });
      if (this.page.selection.length == 0) {
        this.$message.warning("请至少选择一条数据。");
        return;
      }
      this.$refs.updateDialog.show();
    },
    //拆分
    async OnAssetCopy() {
      if (this.page.selection.length == 0) {
        this.$message.warning("请至少选择一条数据。");
        return;
      }
      this.page.loading = this.page.Copyloading = true;
      await Promise.allSettled(
        this.page.selection.map(({ ASSET_A1_AUTOID }) => {
          return AssetA1.AssetCopy(ASSET_A1_AUTOID);
        })
      );
      this.$message("保存成功"); //提示
      this.getAssetA1Data();
      this.$nextTick(() => {
        this.page.loading = this.page.Copyloading = false;
      });
    },
    //打开搜索
    showAssetA1Search(item) {
      // this.getAssetA1Search().show({ form: { ...item } });
      this.$refs.searchDialog.show();
    },
    //打开资产卡片
    showAssetCard(item) {
      this.page.selectData = item;
      this.$refs.cardDialog.show();
    },
    //表格选择
    onSelectionChange(val) {
      this.page.selection = val;
    },
    //删除
    OnDelete(val) {
      if (!isArray(val) && val.ASSET_A1_AUTOID) {
        val = [val.ASSET_A1_AUTOID];
      } else if (isArray(val) && val.length != 0) {
        val = val.map(item => item.ASSET_A1_AUTOID);
      } else {
        this.$message.warning("请至少选择一条数据。");
        return;
      }
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await AssetA1.DeleteA1(val);
          res.strMS && this.$message(res.strMS); //提示
          this.getAssetA1Data();
        })
        .catch(() => {});
    },
    //排序事件
    OnSortChane({ column, prop, order }, deprop = "ASSET_A1_30") {
      //column 列对象 | prop 列字段 | order排序 ascending descending null
      //本地内存排序
      /**
       * 1. 每次先执行默认排序 ASSET_A1_30
       * 2. 通过 prop 排序 [].sort
       */
      /*
      this.data.assetA1data.sort((m, n) => n[deprop] - m[deprop]); //倒序
      // order && order == "ascending" && this.data.assetA1data.reverse(); //数组反转
      if (order) {
        this.data.assetA1data.sort((m, n) => {
          //是否有限数字 不是数字 false
          if (isFinite(m[prop]) && isFinite(n[prop])) {
            //数字排序
            return n[prop] - m[prop];
          } else if (n[prop]) {
            //中文排序
            return n[prop].localeCompare(m[prop]);
          } else {
            //如果是空 倒序放在最后
            return -1;
          }
        }); //倒序
        if (order == "ascending") {
          this.data.assetA1data.reverse();
        }
      }*/
      //服务端排序
      if (!order) prop = "";
      if (order == "ascending") order = "";
      this.page.sort = {
        strorder: prop,
        ordertype: order
      };
      this.getAssetA1Data();
    },
    //导入Excel
    OnUpdateExcel() {
      this.$refs.excelDialog.show();
    }
  },
  //组件
  components: {
    assetA1Search,
    assetCard,
    assetA1Edit,
    batchUpdate,
    updateExcel
  },
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {
    //分页后的数据
    tableData() {
      let _data = [];
      const { index = 1, size = 10 } = this.page.paginations;
      _data = this.data.assetA1data.slice((index - 1) * size, size * index);
      return _data;
    },
    assetA1Cols() {
      let _data = [];
      /**
       * 1. 循环加绑定列
       * 2. 如果是关联项的列 字段名 = str + 字段名
       */
      this.data.sysAssetA1Data.forEach(item => {
        Object.assign(item, {
          HeaderText: item.SYS_ASSET_A1_50, //标题
          DataField: item.SYS_ASSET_A1_160, //字段名
          Width: item.SYS_ASSET_A1_20 //宽度
        });
        if (
          item.SYS_ASSET_A1_60 &&
          item.SYS_ASSET_A1_70 &&
          item.SYS_ASSET_A1_80
        ) {
          item.DataField = "str" + item.DataField;
        }
        item.SYS_ASSET_A1_160 && _data.push(item);
      });
      return _data;
    }
  },
  //监视
  watch: {
    //选择分类
    asset60s() {
      this.getAssetA1Data();
    }
    // //搜索字段改变
    // "page.searchtxt"() {
    //   this.getAssetA1Edit();
    // }
    // "page.selectData"() {
    //   // console.log(this.page.selectData);
    // }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
